<template>
  <div class="login-view">
    <h1>
      <a href="javascript:history.go(-1);">取消</a>登录豆瓣
    </h1>
    <form method="" action="">
      <div class="form-user">
        <label>
            <strong>帐号</strong>
            <input
              v-model="user"
              type="text"
              name="user"
              placeholder="邮箱 / 手机号 / 用户名">
        </label>
      </div>
      <div class="form-pwd">
        <label>
            <strong>请输入密码</strong>
            <template v-if="passType === 'password'">
              <input
              v-model="password"
              type="password"
              name="password"
              placeholder="密码">
            </template>
            <template v-if="passType === 'text'">
              <input
              v-model="password"
              type="text"
              name="password"
              placeholder="密码">
            </template>
            <span class="showpwd" :class="{show: isShow}" @click="showpwd()"></span>
        </label>
      </div>
      <!-- <div class="form-element hide">
        <input id="remember" type="checkbox" name="remember" checked="">
        <label for="remember">下次自动登录</label>
      </div> -->
      <div class="">
        <input class="submit" type="submit" value="登录">
      </div>
    </form>
    <div class="footer">
      <div class="more-login">使用其他方式登录 &amp; 找回密码</div>
      <div class="btns">
        <a href="#">注册豆瓣帐号</a>
        <a href="#">下载豆瓣App</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login-view',
  data () {
    return {
      isShow: 0,
      passType: 'password',
      user: '',
      password: ''
    }
  },
  methods: {
    showpwd: function () {
      this.isShow = this.isShow ? 0 : 1
      this.isShow ? this.passType = 'text' : this.passType = 'password'
    }
  }
}
</script>

<style lang="scss" scoped>
.login-view {
  h1 {
    height: 4.5rem;
    margin: 0 0 1rem 0;
    padding: 0 1.8rem;
    line-height: 4.5rem;
    background: #fff;
    border-bottom: 0.1rem solid #eee;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;

    a {
      position: absolute;
      left: 1.8rem;
      top: 0;
      color: #42bd56;
      font-size: 1.5rem;
      font-weight: normal;
    }
  }

  form {
    padding: 2rem 1.5rem;

    strong {
      font-size: 1.5rem;
      color: #222;
      display: none;
      margin-bottom: 0.5rem;
    }

    input[type="text"], input[type="password"] {
      display: inline-block;
      width: 100%;
      height: 4.4rem;
      padding: 0 0.8rem;
      box-sizing: border-box;
      font-size: 1.5rem;
      background: #fff;
      border: 0.1rem solid #ccc;
      border-top-left-radius: 0.3rem;
      border-top-right-radius: 0.3rem;
      outline: 0;
    }

    .form-pwd {
      position: relative;

      input {
        border-top: 0;
      }

      .showpwd {
        position: absolute;
        right: 0.2rem;
        top: 0;
        display: block;
        height: 100%;
        width: 3.2rem;
        background-image: url();
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 2.2rem;
        z-index: 3;
      }

      .showpwd.show {
        background-image: url();
      }
    }

    .submit {
      cursor: pointer;
      width: 100%;
      padding: 1.2rem 2.6rem;
      margin-top: 1rem;
      font-size: 1.7rem;
      text-align: center;
      color: #fff;
      background: #17AA52;
      border: 0.1rem solid #17AA52;
      border-radius: 0.3rem;
    }
  }

  .footer {
    .more-login {
      font-size: 1.5rem;
      color: #aaa;
      text-align: center;
    }

    .btns {
      margin-top: 40px;
      text-align: center;
      font-size: 15px;

      a {
        color: #42bd56;
        margin-right: 1.5rem;
      }
    }
  }
}
</style>
